<!--
 * @Description: 用户列表
 * @Author: DHL
 * @Date: 2022-04-08 09:04:53
 * @LastEditors: DHL
 * @LastEditTime: 2022-04-08 09:15:24
-->
<template>
  <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
    <!-- 按钮组 -->
    <template #btns>
      <el-button class="item" type="primary" @click="handleRefresh">
        <svg-icon iconClass="sync"></svg-icon>
        刷新
      </el-button>
      <el-button class="item" type="warning" @click="handleSearch">
        <svg-icon iconClass="search"></svg-icon>
        查询
      </el-button>
      <el-button class="item" type="info" @click="handleReset">
        <svg-icon iconClass="reload"></svg-icon>
        重置
      </el-button>
    </template>

    <!-- 查询表单 -->
    <template #header>
      <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="登陆名称">
              <el-input
                v-model="searchForm.loginName"
                clearable
                placeholder="请输入登陆名称"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" clearable placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="用户类型">
              <el-input
                v-model="searchForm.userType"
                clearable
                placeholder="请输入用户类型"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="手机号码">
              <el-input
                v-model="searchForm.phone"
                clearable
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input v-model="searchForm.mail" clearable placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="用户状态">
              <el-select v-model="searchForm.status" clearable placeholder="请选择用户状态">
                <tw-dic dicKey="USER_STATUS"></tw-dic>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="职务">
              <el-input v-model="searchForm.position" clearable placeholder="请输入职务"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <!-- 数据表格 -->
    <tw-table
      ref="tableRef"
      :loading="loading"
      :options="tableOptions"
      :events="tableEvents"
      :data="tableData"
      @search="searchList"
    >
    </tw-table>
  </tw-layout>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import { assign, cloneDeep } from 'lodash-es'
  import { TwTableOptions } from '@/types/table.d'
  import { UserModel, UserPageParams } from '@/api/system/model/userModel'
  import { apiUserSearch } from '@/api/system/user'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////

  const loading = ref(false)
  const loadingByDel = ref(false)

  /**
   * 表格数据
   */
  const tableData = ref()

  /**
   * 查询表单
   */
  const searchFormRef = ref()

  /**
   * 数据列表
   */
  const tableRef = ref()

  /**
   * 表单
   */
  const formRef = ref()

  /**
   * 是否有选中的行
   */
  const isSelectRows = computed(() => {
    let selectRows: Array<UserModel> = []
    if (tableRef.value) {
      selectRows = tableRef.value.getSelectRows()
    }
    return selectRows.length < 1
  })

  //////////////////////////////////////////////////
  // 查询表单
  //////////////////////////////////////////////////

  const defaultSearchForm = {
    id: '', // 编号
    tenantId: '', // 租户ID
    platformId: '', // 平台ID
    loginName: '', // 登陆名称
    pwd: '', // 登录密码
    name: '', // 姓名
    userType: '', // 用户类型
    phone: '', // 手机号码
    mail: '', // 邮箱
    status: '', // 用户状态（0，失效；1，生效）
    firstLogin: '', // 是否第一次登录（0，否；1，是）
    openid: '', // 微信OPENID
    photo: '', // 头像
    clientId: '', // APP客户端唯一标识
    position: '', // 职务
    version: 0 //
  }

  /**
   * 查询表单
   */
  const searchForm = reactive(cloneDeep(defaultSearchForm))

  //////////////////////////////////////////////////
  // 表格
  //////////////////////////////////////////////////

  /**
   * 表格配置
   */
  const tableOptions = reactive<TwTableOptions>({
    id: 'userListTable',
    sortConfig: {
      defaultSort: [{ field: 'updateDate', order: 'desc' }]
    },
    columns: [
      { type: 'checkbox', fixed: 'left', title: '', align: 'center', width: 40 },
      { type: 'seq', fixed: 'left', title: '序号', width: 50 },
      { field: 'tenantId', title: '租户ID', sortable: true },
      { field: 'loginName', title: '登陆名称', sortable: true },
      { field: 'pwd', title: '登录密码', sortable: true },
      { field: 'name', title: '姓名', sortable: true },
      { field: 'userType', title: '用户类型', sortable: true },
      { field: 'position', title: '职务', sortable: true },
      { field: 'phone', title: '手机号码', sortable: true },
      { field: 'mail', title: '邮箱', sortable: true },
      {
        field: 'status',
        title: '用户状态',
        sortable: true,
        params: { dict: 'USER_STATUS' }
      },
      { field: 'photo', title: '头像', sortable: true },
      { field: 'updater', title: '更新人', sortable: true },
      { field: 'updateDate', title: '更新时间', sortable: true }
    ]
  })

  /**
   * 绑定事件
   */
  const tableEvents = reactive({})

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 查询表格数据函数
   * @param queryParams
   */
  function searchList(queryParams: UserPageParams) {
    loading.value = true
    apiUserSearch(assign(queryParams, searchForm))
      .then((result) => {
        tableData.value = result
      })
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
  }

  /**
   * 查询表格数据
   */
  function handleSearch() {
    tableRef.value.handleQuery()
  }

  /**
   * 刷新
   */
  function handleRefresh() {
    tableRef.value.handleReload()
  }

  /**
   * 重置
   */
  function handleReset() {
    assign(searchForm, cloneDeep(defaultSearchForm))
    tableRef.value.handleQuery()
  }
</script>

<style scoped lang="scss"></style>
